<template>
  <el-descriptions :column="3" border label-width="150">
    <el-descriptions-item :label="t('imrStudent.fields.studentPhoto')" width="280" :rowspan="3">
      <EditImage v-model="model.studentPhoto" />
    </el-descriptions-item>
    <el-descriptions-item
      label-class-name="label-required"
      :label="t('imrStudent.fields.studentCode')"
      width="280"
      :span="2"
    >
      <EditInput
        v-model="model.studentCode"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.studentCode')"
        :disabled="componentsMode === 'view'"
      />
    </el-descriptions-item>
    <el-descriptions-item
      label-class-name="label-required"
      :label="t('imrStudent.fields.studentName')"
      width="280"
    >
      <EditInput
        v-model="model.studentName"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.studentName')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.grade')" width="280">
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_GRADE"
        v-model="model.grade"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.grade')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.classroom')" width="280">
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_CLASSROOM"
        v-model="model.classroom"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.classroom')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.studentType')" width="280">
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_STUDENT_TYPE"
        v-model="model.studentType"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.studentType')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.inschoolFlag')" width="280">
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_INSCHOOL_FLAG"
        v-model="model.inschoolFlag"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.inschoolFlag')"
        @change="handleInschoolFlagChange"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.studentStatus')" width="280">
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_STUDENT_STATUS"
        v-model="model.studentStatus"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.studentStatus')"
        :disable-function="disableFunc"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.leaveDate')" width="280">
      <EditDate
        v-model="model.leaveDate"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.leaveDate')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.identityNumber')" width="280">
      <EditInput
        v-model="model.identityNumber"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.identityNumber')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.trainingLevel')" width="280">
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_TRAINING_LEVEL"
        v-model="model.trainingLevel"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.trainingLevel')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.primaryMentorCode')" width="280">
      <EditInput
        v-model="model.primaryMentorCode"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.primaryMentor')"
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.primaryMentor')" width="280">
      <UserSelect
        v-model="model.primaryMentorId"
        @selected="handleMentorSelected"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.primaryMentor')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.researchDept')" width="280">
      <EditInput
        v-model="model.researchDept"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.primaryMentor')"
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.originalCollege')" width="280">
      <EditInput
        v-model="model.originalCollege"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.originalCollege')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.gender')" width="280">
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_GENDER"
        v-model="model.gender"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.gender')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.birthdate')" width="280">
      <EditDate
        v-model="model.birthdate"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.birthdate')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.ethnic')" width="280">
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_ETHNIC"
        v-model="model.ethnic"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.ethnic')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.politicalStatus')" width="280">
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_POLITICAL_STATUS"
        v-model="model.politicalStatus"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.politicalStatus')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.homeAddress')" width="280">
      <EditInput
        v-model="model.homeAddress"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.homeAddress')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.homeTelephone')" width="280">
      <EditInput
        v-model="model.homeTelephone"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.homeTelephone')"
      />
    </el-descriptions-item>
    <el-descriptions-item
      label-class-name="label-required"
      :label="t('imrStudent.fields.personalPhone1')"
      width="280"
    >
      <EditInput
        v-model="model.personalPhone1"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.personalPhone1')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.personalEmail1')" width="280">
      <EditInput
        v-model="model.personalEmail1"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.personalEmail1')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.arpNumber')" width="280">
      <EditInput
        v-model="model.arpNumber"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.arpNumber')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.remark')" width="280">
      <EditInput
        v-model="model.remark"
        :placeholder="
          t('common.inputTextPlaceholder') +
          t('imrStudent.fields.remark') +
          t('imrStudent.fields.invisible')
        "
      />
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import EditInput from '@/views/core/ustcstudent/components/input/EditInput.vue'
import EditDict from '@/views/core/ustcstudent/components/input/EditDict.vue'
import EditDate from '@/views/core/ustcstudent/components/input/EditDate.vue'
import EditImage from '@/views/core/ustcstudent/components/input/EditImage.vue'
import { ImrStudentVO } from '@/api/core/imrstudent'
import { DICT_TYPE, StringDictDataType } from '@/utils/dict'
import UserSelect from '@/views/system/user/components/UserSelect.vue'
import { UserVO } from '@/api/system/user'

const props = defineProps({
  componentsMode: {
    type: String,
    default: 'view'
  }
})

const { t } = useI18n()

const model = defineModel<ImrStudentVO>({ required: true })

const handleMentorSelected = (user: UserVO) => {
  model.value.primaryMentorId = user.id
  model.value.primaryMentorCode = user.jobCode
  model.value.primaryMentor = user.nickname
  model.value.researchDeptId = user.deptId
  model.value.researchDept = user.deptName
}

const disableFunc = (option: StringDictDataType) => {
  if (!model.value.inschoolFlag) {
    return true
  }
  if (model.value.inschoolFlag === '在校') {
    return !['正常'].includes(option.value)
  }
  if (model.value.inschoolFlag === '离校') {
    return !['毕业', '结束联合培养', '未报到', '放弃联合培养资格', '死亡', '退学', '结业'].includes(
      option.value
    )
  }
  if (model.value.inschoolFlag === '待报到') {
    return !['保留联合培养资格'].includes(option.value)
  }
  return false
}

const handleInschoolFlagChange = (val) => {
  if (val === '在校') {
    model.value.studentStatus = '正常'
    model.value.leaveDate = undefined
  } else if (val === '离校') {
    model.value.studentStatus = undefined
    model.value.leaveDate = new Date().getTime()
  } else if (val === '待报到') {
    model.value.studentStatus = '保留联合培养资格'
    model.value.leaveDate = undefined
  } else {
    model.value.studentStatus = undefined
    model.value.leaveDate = undefined
  }
}
</script>

<style scoped lang="scss">
:deep(.label-required) {
  background: var(--el-color-success-light-9) !important;
}
</style>
